<template>
  <div class="video-body">
    <el-row type="flex" >
      <!--左边-->
      <el-col :md="18" :xs="24" :sm="24">
        <div class="mt70">
          <span class="fsize20">{{mediaInfo.title}}</span>
        </div>
        <div style="min-height: 529px" >
<!--          <iFrame v-show="video.url"
            v-if="video.storageType === `bilibiliStorage`"
            src="http://player.bilibili.com/player.html?aid=6117110&cid=9931722&page=1&high_quality=1"
          />-->
          <iFrame v-show="video.url"
                  v-if="video.storageType === `bilibiliStorage`"
                  :src="video.url"
          />
          <video-preview v-else ref="player" :videoId="videoId" :storageType="video.storageType" ></video-preview>
        </div>

        <!-- 评论 -->
          <el-card class="box-card">
              <div class="news_pl" :style="opemCommentCss">
                <h2 v-if="openComment == '1'" class="title">课程评论</h2>
                <Comment v-if="openComment == '1'" :maxReplyLevel="commentInfo.maxReplyLevel"  :targetId="commentInfo.blogUid" :tableName="commentInfo.source"></Comment>
              </div>
          </el-card>
      </el-col>

      <!--右边-->
      <el-col  class="hidden-sm-and-down" :md="6">
        <!--剧情集数-->
        <div class="ml15 mt90">
          <el-menu
            :default-active="`/video/` + video.uid"
            class="el-menu-vertical-demo"
            background-color="#f4f4f4"
            text-color="#222"
            active-text-color="#00a1d6"
            router
          >
            <el-submenu index="0">
              <template slot="title">
                <i class="el-icon-film"></i>
                <span>剧集列表</span>
              </template>
              <el-menu-item  :index="`/video/`+video.uid" v-for="video in mediaInfo.videoList" :key="video.uid" >
                <span class="fsize12">{{ video.title }}</span>
              </el-menu-item>

            </el-submenu>
          </el-menu>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import VideoPreview from '@/components/Play/VideoPreview'
import { getMediaVideo } from '@/api/rankMember'
import iFrame from "@/components/iFrame/index";
import Comment from "../components/Comment";

export default {
  name: 'playVideo',
  components: {
    VideoPreview,
    iFrame,
    Comment
  },
  computed: {
    opemCommentCss: function () {
      if(this.openComment == 0) {
        return {
          "min-height": "10px"
        }
      }
    }
  },
  data() {
    return {
      openComment: 1,
      activeName: 'description',
      videoId: '',
      mediaInfoUid: '',
      video: {},
      mediaInfo: {},
      sourceVideoUrl: '',
      videoPreviewList: [],
      webConfig: {},
      // 视频秘钥对话框数据
      dialogVideoFile: {
        visible: false,
        passwordForm: {
          password: ''
        },
        passwordFormRules: {
          password: [
            {
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            { min: 6,
              max: 12,
              message:
                '密码长度必须介于 6 和 12 之间',
              trigger: 'blur'
            }
          ]
        }
      },
      tableName: 'MEDIA_INFO',
      comments: [],
      commentInfo: {
        // 评论来源： MESSAGE_BOARD，ABOUT，BLOG_INFO 等 代表来自某些页面的评论
        source: "MEDIA_INFO",
        maxReplyLevel: 4, // 最大回复深度
        blogUid: this.videoId
      },
    }
  },
  created() {
    this.videoId = this.$route.params && this.$route.params.videoId;
    if (!this.videoId) {
      this.mediaInfoUid = this.$route.query.mediaInfoUid
      this.commentInfo.blogUid = this.$route.query.mediaInfoUid
    }
    this.getVideoById(this.videoId);
  },
  mounted() {
  },
  watch: {
    "$route": {
      async handler(route) {
        this.videoId = route.params && route.params.videoId;
        await this.getVideoById(this.videoId);
      }
    }
  },
  methods: {
    getVideoById(videoId) {
      const params = {
        mediaInfoUid: this.mediaInfoUid,
        uid: videoId
      }
      getMediaVideo(params).then(response => {
        this.video = response.data.video;
        this.mediaInfo = response.data.mediaInfo;
        this.playVideo();
      });
    },
    playVideo() {
      this.videoPreviewList = []
      if (this.video.storageType === `bilibiliStorage`){
        return
      }
      this.addVideoPreview(this.video.name ,  this.video.url, 'video/mp4');
      let data = {
        videoPreviewVisible: true,
        videoPreviewList: this.videoPreviewList,
        activeIndex: 0
      };
      this.$store.commit('setVideoPreviewData', data);
    },
    addVideoPreview(name, url, type) {
      let data = {
        withCredentials: false,
        type: type,
        src: url,
        name: name
      };
      this.videoPreviewList.push(data)
    }
  }
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  height: 440px;
  overflow: auto;
}

.video-body{
  width: 1200px;
  margin: auto;
}


.fsize12{font-size:12px}.fsize14{font-size:14px}.fsize16{font-size:16px}
.fsize18{font-size:18px}.fsize20{font-size:20px}.fsize24{font-size:24px}.fsize34{font-size:34px}
.mt5{margin-top:5px}.mr5{margin-right:5px}.ml5{margin-left:5px}
.mt10{margin-top:10px}.mr10{margin-right:10px}.mb10{margin-bottom:10px}.ml10{margin-left:10px}
.mt15{margin-top:15px}.mr15{margin-right:15px}.mb15{margin-bottom:15px}.ml15{margin-left:15px}
.mt20{margin-top:20px}.mr20{margin-right:20px}.mb20{margin-bottom:20px}.ml20{margin-left:20px}
.mt30{margin-top:30px}.mr30{margin-right:30px}.mb30{margin-bottom:30px}.ml30{margin-left:30px}
.mt40{margin-top:40px}.mr40{margin-right:40px}.mb40{margin-bottom:40px}.ml40{margin-left:40px}
.mt50{margin-top:50px}.mr50{margin-right:50px}.mb50{margin-bottom:50px}.ml50{margin-left:50px}
.mt60{margin-top:60px}.mr60{margin-right:60px}.mb60{margin-bottom:60px}.ml60{margin-left:60px}
.mt70{margin-top:70px}.mr70{margin-right:70px}.mb70{margin-bottom:70px}.ml70{margin-left:70px}
.mt80{margin-top:80px}.mr80{margin-right:80px}.mb80{margin-bottom:80px}.ml80{margin-left:80px}
.mt90{margin-top:90px}.mr90{margin-right:90px}.mb90{margin-bottom:90px}.ml90{margin-left:90px}
</style>
